<template>
    <div class="container-main">
        <div class="header-container">
            <div class="header-button">
                <el-input placeholder="请输入订单号" v-model="input" clearable style="width: 200px; margin-right: 3%;">
                </el-input>
                <el-date-picker v-model="value" type="date" placeholder="选择日期">
                </el-date-picker>
                <el-button type="warning" @click="searchOrders">查询</el-button>
            </div>
        </div>
        <div>
            <el-table :data="paginatedTableData" border style="width: 100%">
                <el-table-column prop="orderNumber" label="订单号" width="auto">
                </el-table-column>
                <el-table-column label="订单状态" width="auto">
                    <template slot-scope="scope">
                        {{ getStatusText(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="用户" width="auto">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="auto">
                </el-table-column>
                <el-table-column prop="address" label="位置" width="auto">
                </el-table-column>
                <el-table-column prop="dateTime" label="下单时间" width="auto">
                </el-table-column>
                <el-table-column prop="price" label="实收金额" width="auto">
                </el-table-column>
                <el-table-column label="操作" width="auto" flex="1">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="deleteOrder(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <div style="display: flex;justify-content: center;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="filteredTableData.length">
                </el-pagination>
            </div>
        </div>

        <!-- 删除确认对话框 -->
        <el-dialog title="提示" :visible.sync="deleteConfirmDialogVisible" width="30%">
            <span>确定要删除该用户吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteConfirmDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmDeleteOrder">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: '',
            formLabelWidth: '120px',
            deleteConfirmDialogVisible: false,
            searchKeyword: '',
            adminTableData: [],
            currentTableData: [],
            isVisitorActive: true,
            isAdminActive: false,
            // 分页相关数据
            currentPage: 1,
            pageSize: 10,
            input: '',
            tableData: [],
            currentUserToDelete: null,
        }
    },
    computed: {
        filteredTableData() {
            const keyword = this.searchKeyword.trim().toLowerCase();
            const orderNumber = this.input.trim().toLowerCase();
            if (!keyword && !this.value && !orderNumber) {
                return this.currentTableData;
            }
            return this.currentTableData.filter(item => {
                const matchKeyword = !keyword || item.name.toLowerCase().includes(keyword);
                const matchDate = !this.value || item.dateTime.startsWith(this.formatDate(this.value));
                const matchOrderNumber = !orderNumber || item.orderNumber.toLowerCase().includes(orderNumber);
                return matchKeyword && matchDate && matchOrderNumber;
            });
        },
        paginatedTableData() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = this.currentPage * this.pageSize;
            return this.filteredTableData.slice(start, end);
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            const res = {
                data: [
                    {
                        orderNumber: '001',
                        status: '0',//status 0-未支付 1-已支付  3-已完成
                        name: '张三',
                        phone: '134567266',
                        address: '3号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '300'
                    },
                    {
                        orderNumber: '002',
                        status: '1',//status 0-未支付 1-已支付  3-已完成
                        name: '李四',
                        phone: '1345672662',
                        address: '4号桌',
                        dateTime: '2025-10-01 13:00',
                        price: '253'
                    },
                    {
                        orderNumber: '003',
                        status: '1',//status 0-未支付 1-已支付  3-已完成
                        name: '张五',
                        phone: '134567266',
                        address: '1号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '323'
                    },
                    {
                        orderNumber: '004',
                        status: '3',//status 0-未支付 1-已支付  3-已完成
                        name: '李六',
                        phone: '134567266',
                        address: '6号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '300'
                    },
                    {
                        orderNumber: '005',
                        status: '3',//status 0-未支付 1-已支付  3-已完成
                        name: '张七',
                        phone: '134567266',
                        address: '9号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '300'
                    },
                    {
                        orderNumber: '006',
                        status: '1',//status 0-未支付 1-已支付  3-已完成
                        name: '李九',
                        phone: '134567266',
                        address: '7号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '300'
                    },
                    {
                        orderNumber: '007',
                        status: '1',//status 0-未支付 1-已支付  3-已完成
                        name: '王十',
                        phone: '134567266',
                        address: '8号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '300'
                    },
                    {
                        orderNumber: '008',
                        status: '3',//status 0-未支付 1-已支付  3-已完成
                        name: '路人甲',
                        phone: '134567266',
                        address: '12号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '300'
                    },
                    {
                        orderNumber: '009',
                        status: '3',//status 0-未支付 1-已支付  3-已完成
                        name: '张三',
                        phone: '134567266',
                        address: '13号桌',
                        dateTime: '2025-10-01 12:00',
                        price: '300'
                    },
                ]
            };
            this.tableData = res.data;
            this.currentTableData = this.tableData; // 初始化时显示游客用户数据
        },

        getStatusText(status) {
            switch (status) {
                case '0':
                    return '未支付';
                case '1':
                    return '已支付';
                case '3':
                    return '已完成';
                default:
                    return '未知状态';
            }
        },

        // 删除订单
        deleteOrder(row) {
            this.currentUserToDelete = row;
            this.deleteConfirmDialogVisible = true;
        },
        // 确认删除
        confirmDeleteOrder() {
            if (!this.currentUserToDelete) return;
            if (this.isVisitorActive) {
                const index = this.tableData.findIndex(item => item.id === this.currentUserToDelete.id);
                if (index !== -1) {
                    this.tableData.splice(index, 1);
                }
            } else {
                const index = this.adminTableData.findIndex(item => item.id === this.currentUserToDelete.id);
                if (index !== -1) {
                    this.adminTableData.splice(index, 1);
                }
            }
            this.currentTableData = this.isVisitorActive ? this.tableData : this.adminTableData;
            this.deleteConfirmDialogVisible = false;
            this.$message.success("删除成功");
            this.currentUserToDelete = null;
            // 如果删除后当前页没有数据了，跳转到上一页
            if (this.paginatedTableData.length === 0 && this.currentPage > 1) {
                this.currentPage--;
            }
        },
        // 每页条数改变时触发
        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage = 1;
        },
        // 当前页改变时触发
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        // 格式化日期
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        // 查询订单
        searchOrders() {
            this.searchKeyword = this.input;
        }
    }
}
</script>
<style scoped>
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-button {
    display: flex;
    align-items: center;
}

.search-input {
    width: 203px;
}

.container-main {
    padding: 32px;
}

.block {
    display: flex;
    justify-content: center;
}


/* 分页样式 */
.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>